 <!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>视频监控</title> 
    <link rel="shortcut icon" href="${WEB_PATH}/resources/img/logo.png">
</head>

<body >
	<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
       width="0"
       height="0"
       id="vlc" /> 
	<#assign pageSize = 2>
	<#if (cameraList?size>0) >  
		<#list 1..totalPage as t>
			<#assign page = t * pageSize>
			  <#assign pageIndex = page -1>
			  <#list pageIndex..page as i>
			  	<#if (cameraList?size >= i) >
			 	 <div class="col-sm-6">
			 	 	    <style>
								  .class_${i}:after {
								    background-color: #F5F5F5;
								    border: 1px solid #DDDDDD;
								    border-radius: 4px 0 4px 0;
								    color: #9DA0A4;
								    content: "${cameraList[i-1].name}";
								    font-size: 12px;
								    font-weight: bold;
								    left: -1px;
								    padding: 3px 7px;
								    position: absolute;
								    top: -1px;
								}
								.class_${i} {
									margin-top: 10px;
								    margin-left: 10px;
								    padding:40px 15px 0px;
								    border: 1px solid #DDDDDD;
								    border-radius: 4px;
								    position: relative;
								    word-wrap: break-word;
								    width:98%;
								    height:500px;
								}
							</style>
		        	<div style='' class="class_${i} ui-sortable" >
		        		<embed type="application/x-vlc-plugin" width="100%" height="100%"  id="vlc${i}"></embed>  
			        </div>
		           </div>
		         </#if>
		 	 </#list>
		</#list>
	</#if>  
    <script src="${WEB_PATH}/resources/js/plugins/layer/layer.js"></script>
    <script >
    	function myBrowser(){
		     var explorer = window.navigator.userAgent.toLowerCase() ;
			 //ie 
			 if (explorer.indexOf("trident") >= 0) {
			    explorer.length;
			    var ver=explorer.substring(explorer.indexOf("rv:")+3,explorer.lastIndexOf(")"))
			    return {type:"IE",version:ver};
			 }
			 //firefox 
			 else if (explorer.indexOf("firefox") >= 0) {
			    var ver=explorer.match(/firefox\/([\d.]+)/)[1];
			    return {type:"Firefox",version:ver};
			 }
			 //Chrome
			 else if(explorer.indexOf("chrome") >= 0){
			    var ver=explorer.match(/chrome\/([\d.]+)/)[1];
			    return {type:"Chrome",version:ver};
			 }
			 //Opera
			 else if(explorer.indexOf("opera") >= 0){
			 	var ver=explorer.match(/opera.([\d.]+)/)[1];
			 	return {type:"Opera",version:ver};
			 }
			 //Safari
			 else if(explorer.indexOf("Safari") >= 0){
			 	var ver=explorer.match(/version\/([\d.]+)/)[1];
			 	return {type:"Safari",version:ver};
			 }
		}
		
		function isInsalledIEVLC(){ 
			var vlcObj = null;
			var vlcInstalled= false;
			var vlc = document.getElementById("vlc");
			try {
			//	vlcObj = new ActiveXObject("VideoLAN.Vlcplugin.2"); 
			     vlcObj =  vlc.getVersionInfo()
				if( vlcObj != null ){ 
					vlcInstalled = true 
				}
			} catch (e) {
				vlcInstalled= false;
			}       
			return vlcInstalled;
		}
	
		function isInsalledFFVLC(){
	         var numPlugins=navigator.plugins.length;
	         for  (i=0;i<numPlugins;i++)
	         {
	              plugin=navigator.plugins[i];
	              if(plugin.name.indexOf("VideoLAN") > -1 || plugin.name.indexOf("VLC") > -1)
	            {    
	                 return true;
					 
	            }
	         }
	         return false; 
	     }  
		 
    	$(function(){
    	    var obj = myBrowser();
			if (obj.type != "IE" && obj.type != "Firefox") {
			    layer.alert('<span style="color: #ed5565">请使用IE或火狐浏览器！</span>', {
				  icon: 5,
				  skin: 'layer-ext-moon',
				  yes: function(index, layero){
				      parent.layer.closeAll();
				  }
				});
			}else{
				if ("IE" == obj.type) {
				   if(!isInsalledIEVLC()){
				   	    layer.confirm('尊敬的用户您好：<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">请安装视频播放插件后进行播放!</span>',{icon: 3, title:'视频播放信息提示',btn: ['下载']},
			    		function(){
	                		window.location.href='../../resources/vlc/vlc-2.2.4-win32.exe';
	                		parent.layer.closeAll();
						});
				   } 
				}
				if ("Firefox" == obj.type) {
				   if(!isInsalledIEVLC()){
				   	    layer.confirm('尊敬的用户您好：<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">请安装视频播放插件后进行播放!</span>',{icon: 3, title:'视频播放信息提示',btn: ['下载']},
			    		function(){
			    			window.open("${WEB_PATH}/resources/vlc/vlc-2.2.4-win32.exe");
	                		parent.layer.closeAll();
						});
				   } 
				}
			}
        });
    var options = new Array("rtsp-tcp")
    <#assign pageSize = 2>
	<#if (cameraList?size>0) >  
		<#list 1..totalPage as t>
			<#assign page = t * pageSize>
			  <#assign pageIndex = page -1>
			  <#list pageIndex..page as i>
			  	<#if (cameraList?size >= i) >
			  		var vlc${i} = document.getElementById("vlc${i}");  
					var id${i} = vlc${i}.playlist.add("rtsp://${cameraList[i-1].userName}:${cameraList[i-1].password}@${cameraList[i-1].IP}:${cameraList[i-1].prot}${cameraList[i-1].videoVideo.pram}", "fancy name", options);
					vlc${i}.playlist.playItem(id${i});
					vlc${i}.audio.toggleMute(); 
			  	</#if>
		 	 </#list>
		</#list>
	</#if> 
    </script>
</body>

</html>